<template>
  <a-card title="IconSelector - 图标选择器" :bordered="false">
    <a slot="extra" target="_blank" href="http://rest-doc.easy-frame.top/front-end/components/general.html">文档地址</a>
    <p>
      图标选择器
    </p>

    <a-divider>直接在页面中显示</a-divider>
    <icon-select/>
    <a-divider>选择一个图标</a-divider>
    <a-input v-model="icon" @click="handleIconInputClick" style="width: 200px">
      <a-icon slot="addonAfter" v-if="icon != null && icon !== ''" :type="icon"/>
    </a-input>

    <a-modal width="960px" v-model="iconModalVisible" title="选择图标" @ok="handleOk">
      <icon-select v-model="currentSelectedIcon" @change="handleIconChange"/>
    </a-modal>
  </a-card>
</template>

<script>
import IconSelect from '@/components/IconSelector/IconSelector'
export default {
  name: 'SampleComponentsDataEntryIconSelector',
  components: { IconSelect },
  data () {
    return {
      // 显示图标对话框
      iconModalVisible: false,
      currentSelectedIcon: null,
      icon: 'lock'
    }
  },
  methods: {
    handleIconInputClick () {
      this.currentSelectedIcon = this.icon
      this.iconModalVisible = true
    },
    handleOk () {
      this.icon = this.currentSelectedIcon
      this.iconModalVisible = false
    },
    handleIconChange (icon) {
      this.currentSelectedIcon = icon
    }
  }
}
</script>

<style scoped>

</style>
